@extends('layouts.layouts')
@section('title')
    <title>七牛添加视频</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="admin.saipujianshen.com">
@endsection
@section('content')

<style>
#box,
#box2 {
  margin-top: 20px;
  height: 46px;
}
.fragment-group {
  overflow: hidden;
  padding-left: 0;
}
.hide {
  visibility: hidden;
}
.fragment-group .fragment {
  float: left;
  width: 30%;
  padding-right: 10px;
  list-style: none;
  margin-top: 10px;
}
.file-input {
  display: inline-block;
  box-sizing: border-box;
  width: 130px;
  height: 46px;
  opacity: 0;
  cursor: pointer;
}

.select-button {
  position: absolute;
  background-color: #00b7ee;
  color: #fff;
  font-size: 18px;
  padding: 0 30px;
  line-height: 44px;
  font-weight: 100;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.speed {
  margin-top: 15px;
}
.control-upload {
  line-height: 14px;
  margin-left: 10px;
}
.control-container {
  float: left;
  width: 20%;
}
#totalBar {
  margin-bottom: 40px;
  float: left;
  width: 80%;
  height: 30px;
  border: 1px solid;
  border-radius: 3px;
}
.linkWrapper img {
  width: 100px;
  height: 100px;
}
.modal-body {
  text-align: center;
}
.buttonList a {
  padding: 5px 10px;
  background: #fff;
  border-radius: 5px;
  color: #000;
  margin-left: 10px;
  cursor: pointer;
}
.buttonList ul {
  text-align: left;
}
.buttonList li {
  list-style: none;
  margin-top: 15px;
}
.disabled {
  background: #ccc;
}
.display a {
  display: block;
  background: #fff;
}
label.error{color:red;font-size: 1.2em;width: 50%;text-align: left;}
label.checked{color:green;font-size: 1.2em;width: 50%;text-align: left;}

</style>
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="/video/index">视频列表</a> </li>
                <li class="active">添加视频</li>
            </ul>
        </div>
        <div class="main-content">
            <ul class="nav nav-tabs nav-tabs-course">
                <li role="presentation" class="course_add active"><a href="javascript:void(0);">视频添加</a></li>
                <!--<li role="presentation" class="course_hour_add"><a href="javascript:void(0);">课时添加</a></li>-->
            </ul>
{{--<iframe name="ifram" style="display:none"></iframe>--}}
  <form class="form-horizontal" id="courseFormInfo" method="post" action="/qiniu/store" enctype="multipart/form-data" target="ifram">
                {{csrf_field()}}
                <input type="hidden" name="url" class="qiniuVideo" value=""/>
                
            <div class="course_class row">
                    <div class="col-md-8">
                    </br>
                    <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">视频上传目录：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control ext_name" id="inputEmail3" name="ext_name" placeholder="视频上传目录前缀">
                                </div>

                  </div>
                    <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">上传视频：</label>
                                <div class="col-sm-9">
                                     
                                      <div id="box" class="hide">
                                        <button class="select-button">选择文件</button>
                                        <a class="file-input" id="select"></a>
                                      </div>
                                      <div id="box2">
                                        <button class="select-button">选择文件</button>
                                        <input class="file-input" type="file" id="select2" />
                                      </div>
                                   
                                </div>
                            </div>

                    <div class ="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label"></label>
                        <div class="" style="margin-left:25%;min-width:1000px;">
                        <div class="nav-box" style="margin-top:30px">
                              <div id="process" class="tab-content">
                                <div class="tab-pane fade in active" id="h5">
                                  <table class="table table-striped table-hover text-left" style="margin-top:30px">
                                    <thead>
                                      <tr>
                                        <th class="col-md-4">文件名称</th>
                                        <th class="col-md-2">大小</th>
                                        <th class="col-md-6">进度</th>
                                      </tr>
                                    </thead>
                                    <tbody id="fsUploadProgress">

                                    </tbody>
                                  </table>
                                </div>
                               
                              </div>
                            </div>
                          </div>
                        </div>

                        <br>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">视频名称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="inputEmail3" name="title" placeholder="视频名称">
                                </div>

                            </div>
                          
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-3 control-label">状态栏</label>
                								<div class="col-sm-5">
                									<select name="state" id="DropDownTimezone" class="form-control">
                											<option value="0">禁用</option>
                											<option value="1" selected>显示</option>
                									</select>
                								</div>
                            </div>
              
                            
                           
                        </div>
                    </div>
                </div>
                   
                    <div class="row">
                        <p>
                            <button type="submit" class="btn btn-primary btn-lg col-md-offset-5 btn_submit" style="width:120px;background:#286090;color:#fff;">提交</button>
                        </p>
                    </div>

          </form>
        </div>
    </div>

<!--模态框-->
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="display">
            <a id = "imgContainer">
              <img data-key="">
            </a>
          </div>
          <div class="buttonList">
            <ul>
              <li>
                <div class="watermark">
                  <span>水印控制：</span>
                  <a href="#" data-watermark="NorthWest" class="btn btn-default disabled">
                    左上角
                  </a>
                  <a href="#" data-watermark="SouthWest" class="btn btn-default">
                    左下角
                  </a>
                  <a href="#" data-watermark="NorthEast" class="btn btn-default">
                    右上角
                  </a>
                  <a href="#" data-watermark="SouthEast" class="btn btn-default">
                    右下角
                  </a>
                  <a href="#" data-watermark="false" class="btn btn-default">
                    无水印
                  </a>
                </div>
              </li>
              <li>
                <div class="imageView2">
                  <span>缩略控制：</span>
                  <a href="#" data-imageview="large" class="btn btn-default disabled">
                    大缩略图
                  </a>
                  <a href="#" data-imageview="middle" class="btn btn-default">
                    中缩略图
                  </a>
                  <a href="#" data-imageview="small" class="btn btn-default">
                    小缩略图
                  </a>
                </div>
              </li>
              <li>
                <div class="imageMogr2">
                  <span>旋转控制：</span>
                  <a href="#" data-imagemogr="left" class="btn btn-default no-disable-click">
                    逆时针
                  </a>
                  <a href="#" data-imagemogr="right" class="btn btn-default no-disable-click">
                    顺时针
                  </a>
                  <a href="#" data-imagemogr="no-rotate" class="btn btn-default">
                    无旋转
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
  </div>
<!---end-->
<script src="/lib/jquery.validate.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/json3/3.3.2/json3.min.js"></script>
<script type="text/javascript" src='/js/qiniu/plupload.full.min.js'></script>
<script type="text/javascript" src="https://unpkg.com/qiniu-js@2.5.1/dist/qiniu.min.js"></script>
<script type="text/javascript" src='/js/qiniu/widget.js'></script>
<script type="text/javascript" src='/js/qiniu/common.js'></script>
<script type="text/javascript" src='/js/qiniu/ui.js'></script>

<script type="text/javascript" src='/js/qiniu/uploadWithSDK.js'></script>
<script type="text/javascript">
  $.ajax({url: "/qiniu/getUpToken", success: function(res){
    
    var token = res.uptoken;
    var domain = res.domain;
    var config = {
      useCdnDomain: true,
      disableStatisticsReport: false,
      retryCount: 6,
      region: qiniu.region.z1
    };
    var putExtra = {
      fname: "",
      params: {},
      mimeType: null
    };
    $(".nav-box")
      .find("a")
      .each(function(index) {
        $(this).on("click", function(e) {
          switch (e.target.name) {
            case "h5":
              uploadWithSDK(token, putExtra, config, domain);
              break;
            case "expand":
              uploadWithOthers(token, putExtra, config, domain);
              break;
            case "directForm":
              uploadWithForm(token, putExtra, config);
              break;
            default:
              "";
          }
        });
      });
	  
    imageControl(domain);
    uploadWithSDK(token, putExtra, config, domain);
	  
  }})


//  $("#courseFormInfo").validate({
//    rules:{
//      title:{
//          required:true,
//
//        },
//        url:{required:true,}
//    },
//    messages:{
//        title:{
//          required:"请输入视频标题",
//        },
//        url:{required:"",}
//        },
//    success: function(label) {
//          label.html("通过验证").addClass("checked");
//      },
//    highlight:function(element,errorClass){
//        $(element).parent().find("." +errorClass).removeClass("checked");
//        //console.log($(element).parent());
//      },
//    submitHandler:function(form) {
//         form.submit();
//         window.location.href = "/video/index";
//
//      }
//  });
$(".btn_submit").click(function(){
    form.submit();
});
</script>

@endsection